<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JS 中 String 的字符串截取 substr 和 substring 区别的快速记忆方法 - 树朾的开源技术分享</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="开源, 分享">
  <meta name="description" content="substr 和 substring 两个函数困扰我的...">
  <meta name="author" content="scwang90">
  <link rel="icon" href="/images/icons/favicon.ico">
  
  
  
  
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1445822_p6ry5n7lrr.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      loading: {
        gif: '/images/theme/loading.gif',
        lottie: ''
      },
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: {
          gif: '/images/theme/loading.gif',
          lottie: ''
        }
      },
      donate: {
        enable: false,
        alipay: '/images/donate/pay_alipay.jpg',
        wechat: '/images/donate/pay_wxpay.jpg',
        tencent: '/images/donate/pay_tencent.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: true,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: false,
        path: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 6.2.0"></head>

<body class="lock-screen">
  <div class="loading" id="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
        <i class="iconfont iconqrcode j-navbar-qrcode"></i>
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
    </div>
    <div class="center">JS 中 String 的字符串截取 substr 和 substring 区别的快速记忆方法</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
      <div id="qrcode-navbar"></div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 摄影</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    
      <div class="row container container-lg">
        <div class="col-xl-2"></div>
        <div class="col-xl-8"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">JS 中 String 的字符串截取 substr 和 substring 区别的快速记忆方法</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>四月 07, 2024</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>2340</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content article-entry">
        
          
        
        <h2 id="摘要"><a href="#摘要" class="headerlink" title="摘要"></a>摘要</h2><p>JS 中 String 的字符串截取 substr 和 substring 两个函数困扰我的从来都不是他们的区别，而是如何记住他们谁是谁，这两家伙很容易混淆。</p>
<h2 id="混淆场景"><a href="#混淆场景" class="headerlink" title="混淆场景"></a>混淆场景</h2><ul>
<li><strong>substr(startIndex, length):</strong> 这个方法返回从 startIndex 开始的长度为 length 的子字符串。如果省略 length，则从 startIndex 开始一直到字符串末尾。如果 startIndex 为负数，它被视为从字符串末尾开始的位置。</li>
<li><strong>substring(startIndex, endIndex):</strong> 这个方法返回从 startIndex 开始到 endIndex（不包括 endIndex）之间的子字符串。如果省略 endIndex，则默认为字符串的末尾。如果 startIndex 大于 endIndex，则 substring() 方法会将参数交换并返回相同的结果。</li>
</ul>
<p>如果只是截取某个位置到结束，这两个函数是没有区别的，也不用特别记忆，用谁都一样。但是如果截取的是中间的某段，第二个参数就不一样了，两个函数容易记混，每次都得再查一遍文档，确认第二个参数才能确保程序不会有问题。</p>
<p>所以我们容易混淆的就是第二个参数 <code>length</code> <code>endIndex</code> 和 函数 <code>substr</code> <code>substring</code> 的对应关系！</p>
<h2 id="记忆方法"><a href="#记忆方法" class="headerlink" title="记忆方法"></a>记忆方法</h2><p>经过我的多次琢磨，终于找到记住他们的方法，就是：<code>比较字符长短</code> ！。 </p>
<ul>
<li><code>substr</code> 和 <code>substring</code> 函数最直观的区别就是一个长一个短  </li>
<li><code>length</code> 和 <code>endIndex</code> 其实他们表观区别也是一长一短。</li>
</ul>
<p>那么很容易就得出他们的匹配关系是：<code>短对短</code>，<code>长对长</code>。我们很容易就会把  <code>substr</code> 和  <code>length</code> ，<code>substring</code> 和 <code>endIndex</code> 对应上。</p>
<ul>
<li>substr(startIndex, length):</li>
<li>substring(startIndex, endIndex):</li>
</ul>
<p>这样就不用每次遇到都去查一遍文档，从而节省时间了。</p>
<h2 id="详细区别"><a href="#详细区别" class="headerlink" title="详细区别"></a>详细区别</h2><p>虽然本文重点不是讨论他们的区别，但是既然提到了，还是去爬取一下其他文章的内容。</p>
<h3 id="1-JS-中-string-的-substring-和-substr-的区别"><a href="#1-JS-中-string-的-substring-和-substr-的区别" class="headerlink" title="1. JS 中 string 的 substring 和 substr 的区别"></a>1. <strong>JS 中 string 的 substring 和 substr 的区别</strong></h3><p>在 JavaScript 中，处理字符串是常见的操作。<code>substring</code> 和 <code>substr</code> 是两个经常被用来截取字符串的方法，但它们之间有一些重要的区别。在 ES6 中，推荐使用 <code>slice</code> 方法，因为 <code>substr</code> 方法在某些浏览器中可能不被支持。但了解 <code>substring</code> 和 <code>substr</code> 的区别仍然对于理解 JavaScript 的历史发展和兼容性问题是有帮助的。</p>
<h3 id="2-substring-方法"><a href="#2-substring-方法" class="headerlink" title="2. substring 方法"></a>2. <strong>substring 方法</strong></h3><p><code>substring</code> 方法返回字符串中两个指定的索引号之间的字符。该方法提取从 <code>startIndex</code>（包含）到 <code>endIndex</code>（不包含）之间的所有字符。</p>
<p>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">str.<span class="title function_">substring</span>(indexStart[, indexEnd])</span><br></pre></td></tr></table></figure>

<ul>
<li><code>indexStart</code>：必需。一个非负的整数，规定要提取的子串的第一个字符在 <code>str</code> 中的位置。</li>
<li><code>indexEnd</code>：可选。一个非负的整数，比要提取的子串的最后一个字符在 <code>str</code> 中的位置大 1。如果省略该参数，那么返回的子串会一直到字符串的末尾。</li>
</ul>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;Hello, World!&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">substring</span>(<span class="number">0</span>, <span class="number">5</span>)); <span class="comment">// 输出 &quot;Hello&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">substring</span>(<span class="number">7</span>));    <span class="comment">// 输出 &quot;World!&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-substr-方法"><a href="#3-substr-方法" class="headerlink" title="3. substr 方法"></a>3. <strong>substr 方法</strong></h3><p><code>substr</code> 方法返回一个字符串从指定位置开始的指定长度的字符。</p>
<p>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">str.<span class="title function_">substr</span>(start[, length])</span><br></pre></td></tr></table></figure>

<ul>
<li><code>start</code>：必需。所需的子字符串的起始位置。如果是负数，那么它规定的是从字符串尾部开始算起的字符位置。</li>
<li><code>length</code>：可选。要返回的字符数。如果省略了该参数，则返回从 <code>start</code> 到字符串结束的所有字符。</li>
</ul>
<p>示例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;Hello, World!&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">substr</span>(<span class="number">0</span>, <span class="number">5</span>)); <span class="comment">// 输出 &quot;Hello&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">substr</span>(<span class="number">7</span>));    <span class="comment">// 输出 &quot;World!&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">substr</span>(-<span class="number">1</span>));   <span class="comment">// 输出 &quot;!&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="4-区别总结"><a href="#4-区别总结" class="headerlink" title="4. 区别总结"></a>4. <strong>区别总结</strong></h3><ul>
<li><p><strong>参数含义不同</strong>：</p>
<ul>
<li><code>substring</code> 的两个参数都是索引位置，且都表示子串的边界（第二个参数位置的字符不包括在内）。</li>
<li><code>substr</code> 的第一个参数是起始位置，第二个参数是返回字符串的长度。</li>
</ul>
</li>
<li><p><strong>处理负数参数的方式不同</strong>：</p>
<ul>
<li><code>substring</code> 方法把负数参数当作 0 来处理，因为它只接受非负索引。</li>
<li><code>substr</code> 方法如果第一个参数是负数，则从字符串的尾部开始计算位置。</li>
</ul>
</li>
<li><p><strong>浏览器兼容性</strong>：</p>
<ul>
<li>虽然大部分现代浏览器都支持 <code>substring</code> 和 <code>substr</code>，但 <code>substr</code> 方法在一些老的或非主流的浏览器中可能不被支持。因此，对于需要确保广泛兼容性的代码，使用 <code>substring</code> 或 <code>slice</code> 方法可能更稳妥。</li>
</ul>
</li>
<li><p><strong>推荐使用</strong>：</p>
<ul>
<li>由于 <code>substr</code> 的兼容性问题以及 ES6 中引入了更强大和灵活的 <code>slice</code> 方法，现代 JavaScript 开发中更推荐使用 <code>slice</code> 方法来处理字符串的截取操作。</li>
</ul>
</li>
</ul>

      </section>
      <section class="extra">
        
          <ul class="copyright">
  
    <li><strong>本文作者：</strong>scwang90</li>
    <li><strong>本文链接：</strong><a href="https://blog.scwang90.cn/2024/04/07/js-string-sub/index.html" title="https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;04&#x2F;07&#x2F;js-string-sub&#x2F;index.html">https:&#x2F;&#x2F;blog.scwang90.cn&#x2F;2024&#x2F;04&#x2F;07&#x2F;js-string-sub&#x2F;index.html</a></li>
    <li><strong>版权声明：</strong>本分享所有文章均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" title="BY-NC-SA" target="_blank" rel="noopener">BY-NC-SA</a> 许可协议，转载请注明出处！</li>
  
</ul>
        
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/" rel="tag">Javascript</a></li></ul> 

        
  <nav class="nav">
    <a href="/2024/04/09/exiftool-intruduce/"><i class="iconfont iconleft"></i>深入解析与实战 ExifTool：全能的元数据处理利器</a>
    <a href="/2024/03/30/bat-crlf/">Windows BAT批处理由于CRLF问题引发的奇怪错误<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
        <div class="col-xl-2">
          
            
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%91%98%E8%A6%81"><span class="toc-text">摘要</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B7%B7%E6%B7%86%E5%9C%BA%E6%99%AF"><span class="toc-text">混淆场景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%B0%E5%BF%86%E6%96%B9%E6%B3%95"><span class="toc-text">记忆方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%A6%E7%BB%86%E5%8C%BA%E5%88%AB"><span class="toc-text">详细区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-JS-%E4%B8%AD-string-%E7%9A%84-substring-%E5%92%8C-substr-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">1. JS 中 string 的 substring 和 substr 的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-substring-%E6%96%B9%E6%B3%95"><span class="toc-text">2. substring 方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-substr-%E6%96%B9%E6%B3%95"><span class="toc-text">3. substr 方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8C%BA%E5%88%AB%E6%80%BB%E7%BB%93"><span class="toc-text">4. 区别总结</span></a></li></ol></li></ol>
  </aside>

          
        </div>
      </div>
    
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=283371828 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://github.com/scwang90 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:scwang90@hotmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://github.com/scwang90">scwang90</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><a target="_blank" href="http://beian.miit.gov.cn/"><span>黔ICP备2021004317号-1</span></a><span>  |  </span><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img class="lazyload" data-original="/images/icons/icon-filing.png" src="https://www.beian.gov.cn/img/new/gongan.png"/> <span> 贵公网安备 52010202002539号</span></a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>





  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>






  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>




<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>